<template>
  <div class="navbar flex-ajc transition-colors duration-1000" :class="{'active': props.tabIndex !== 0 }">
    <div class="navbar-close" :class="{'active': show }" @click="showNavbar"/>
    <div class="navbar-title overflow-hidden flex h-full transition-all duration-1000" :class="{ 'active': show }">
      <li v-for="(item,index) in titles" :key="index" class="h-full min-w-small flex-ajc px-1.5  text-white hover:bg-black hover:bg-opacity-10 transition-all duration-500" :class="{'active': props.tabIndex===index}" @click="clickHandler(index)">
        {{ item }}
      </li>
    </div>
    <lang-selector class="absolute right-12" ></lang-selector>
  </div>
</template>
<script setup name="navBar">

const props = defineProps({
  titles: {
    type: Array,
    default() {
      return [];
    },
  },
  tabIndex: {
    default: 0,
    type: Number
  }
});

const emits = defineEmits(['clickTitle']);

const show = ref(true);

const clickHandler = (index) => {
  emits('clickTitle', index);
};

const showNavbar = () => {
  show.value = !show.value;
};

</script>
<style scoped lang="scss">
.navbar {
  @apply fixed z-10 h-14 w-full flex items-center justify-center font-bold  cursor-pointer;
  &.active {
    @apply bg-black bg-opacity-10;
  }

  &-close {
    @apply relative rounded-full w-10 h-10 mx-10 duration-500 hover:bg-black hover:bg-opacity-10;
    &:before{
      @apply absolute bg-gray-400 transition-all duration-500 w-7 h-1 left-1.5 top-3;
      content: "";
    }
    &:after{
      content: "";
      @apply absolute bg-gray-400 transition-all duration-500 w-7 h-1 left-1.5 bottom-3;
    }
    &.active {
      &:before{
        @apply absolute bg-gray-800 w-7 h-1 rotate-45 top-4;
      }
      &:after{
        @apply absolute bg-gray-800 w-7 h-1 -rotate-45 bottom-5;
      }
    }
  }
  &-title {
    max-width: 0;
    & li.active {
      @apply bg-black bg-opacity-10;
    }

    &.active{
      max-width: 80%;
    }
  }
}
</style>
